<template>
	<view class="indexContainer">
		<!-- 头部 -->
		<view class="top">
			<Search color='#010932'></Search>
			
			<!-- 导航栏 -->
			<view class="nav">
				<scroll-view scroll-x="true" enable-flex class="navScroll">
					<view class="navItem active">
						<text>首页</text>
						<text class="border" v-show="isShow"></text>
					</view>
					<view class="navItem" v-for="(nav,index) in navList" :key="nav.title">
						<text>{{nav.title}}</text>
						<text class="border" v-show='!isShow'></text>
					</view>

				</scroll-view>
				<text class="iconfont icon-yemianzuoshangjiaocaidanbiao">
				</text>
			</view>
		</view>
		
		<!-- 底部 -->
		<scroll-view scroll-y="true" enable-flex class="footer">
			<!-- 广告区域 -->
			<view class="banner">
				<swiper class="bannerList" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
					<swiper-item class="bannerItem" v-for="(banner,index) in bannerInfo['1']" :key="banner.id">
						<image class="bannerImg" :src="banner.mImage"></image>
					</swiper-item>
				</swiper>
			</view>
			
			<!-- 小图 -->
			<image class="miniImg" :src="bannerInfo['31'][0].mImage"></image>
			
			<!-- 菜单 -->
			<view class="menu">
				<view class="menuItem" v-for="menu in menuList" :key="menu.id">
					<image class="menuImg" :src="menu.icon"></image>
					<text class="menuText">{{menu.title}}</text>
				</view>
				
			</view>
			
			<!-- 抢购 -->
			<view class="appreciine">
				<view class="Lbox">
					<image class="LbigImg" :src="appreciine.mainImg"></image>
					<view class="Lmiddle">
						<image class="middleImg" :src="goodsInfo.image"></image>
						<view class="middleContent">
							<text class="about">{{goodsInfo.goodsName}}</text>
							<text class="btn">{{goodsInfo.labelName}}</text>
						</view>
					</view>
					<view class="sale">
						<image class="saleImg" :src="appreciine.priceImg"></image>
						<view class="saleContent">
							<text class="one">￥</text>
							<text class="two">9.</text>
							<text class="three">90</text>
							<text class="four">{{goodsInfo.price}}</text>
						</view>
					</view>
				</view>
				<view class="Rbox">
					<view class="RboxTop">
						<image class='topImg1' :src="appreciine.details[0].icon"></image>
						<image class="topImg2" :src="appreciine.details[1].icon"></image>
					</view>
					<image class="RboxImg" :src="appreciine.details[2].icon"></image>
				</view>
				
				
			</view>
			
			<!-- 大牌必买 -->
			<view class="bigTrademark">
				<view class="tdTop">
					<image class='tdIcon' src="" mode=""></image>
					<text class='tdTitle'>{{bigTrademark.config.title}}</text>
					<text class="tdText">{{bigTrademark.config.subtitle}}</text>
				</view>
				<scroll-view scroll-x="true" enable-flex class="tdScroll" enable-flex='true'>
					<view class='scrollItem' v-for="(goods,index) in bigTrademark.goods" :key="goods.id">
						<image class='scrollImg' :src="goods.goodsImg" mode=""></image>
						<text class="scrollContent">{{goods.goodsName}}</text>
						<view class="price">
							<text class='one'>企</text>
							<text class='two'>￥</text>
							<text class='three'>{{tdPrice[index].split('.')[0]}}.</text>
							<text class='four'>{{tdPrice[index].split('.')[1]}}</text>
						</view>
						<text class='cancelText'>{{tdDelete[index]}}</text>
					</view>
					
				</scroll-view>
				<view class="scrollBar">
					111
				</view>
			</view>
			
			<!-- 产地精选 -->
			<view class="selectGoods">
				<view class="header">
					<image class='headerImg' src=""></image>
					<text class='headerText'>产原地精选</text>
				</view>
				<view class="map">
					<view class="mapItem" v-for="map in mapList" :key="map.id" @click="isClick = map.id">
						<text class='name' :class="{active:isClick === map.id}">{{map.mainLabel}}</text>
						<text class='tools' :class="{active:isClick === map.id}">{{map.subLabel}}</text>
						<text class="iconfont icon-paixujiantouxia1" v-show="isClick === map.id"></text>
					</view>

				</view>
				<image class='mapImg' :src="mapImgUrl"></image>
				<view class="goodsList">
					<!-- 产品左列表 -->
					<view class="goodsItemL">
						<view class="lItem" v-for="(goodsItem,index) in goodsListL" :key="goodsItem.sellerGoodsId">
							
							<image class="lImg" :src="goodsItem.image"></image>
							<view class="content">
								
								<text>{{goodsItem.title}}</text>
								<view class="price">
									<text class='one'>企</text>
									<text class='two'>￥</text>
									<text class='three'>{{LPrice[index].split('.')[0]}}.</text>
									<text class='four'>{{LPrice[index].split('.')[1]}}</text>
								<text class='delete'>{{LDelPrice[index]}}</text>
								</view>
								</view>
						</view>
						
					</view>
					
					
					
					<!-- 产品右列表 -->
					<view class="goodsItemR">
						
						<view class="rItem" v-for="(goodsItem,index) in goodsListR" :key="goodsItem.sellerGoodsId">
											
							<image class='lImg' :src="goodsItem.image"></image>
							<view class="content">
								
								<text>{{goodsItem.title}}</text>
								<view class="price">
									<text class='one'>企</text>
									<text class='two'>￥</text>
									<text class='three'>{{RPrice[index].split('.')[0]}}.</text>
									<text class='four'>{{RPrice[index].split('.')[1]}}</text>
									<text class='delete'>{{RDelPrice[index]}}</text>
								</view>
									
								</view>
								
						</view>
						
	
							
					</view>
					
					
				</view>
			</view>
		</scroll-view>
		
		
		
	</view>
	

</template>


<script>
import {mapState,mapGetters} from 'vuex';
export default {
	name:'Index',
	data(){
		return {
			isShow:true,
			mapImgUrl:'https://image3.vipmro.net//smbPchomeImg/5acfb7e3-ea79-47d8-89a5-677e62f50ab6.jpg',
			isClick:8
		}
	},
	mounted() {
		this.getNavList(),
		this.getBannerInfo(),
		this.getMenu(),
		this.getAppreciine(),
		this.getTradmark(),
		this.getMapList(),
		this.getHomeGoosList()
	},
	methods:{
		// 获取导航列表
		getNavList(){
			this.$store.dispatch('home/getNavList')
		},
		// 获取广告对象
		getBannerInfo(){
			this.$store.dispatch('home/getBannerInfo')
		},
		// 获取菜单列表
		getMenu(){
			this.$store.dispatch('home/getMenuList')
		},
		// 获取抢购数据
		getAppreciine(){
			this.$store.dispatch('home/getAppreciine')
		},
		// 获取大牌数据
		getTradmark(){
			this.$store.dispatch('home/getTradmark')
		},
		// 获取地图列表
		getMapList(){
			this.$store.dispatch('home/getMapList')
		},
		getHomeGoosList(){
			this.$store.dispatch('home/getHomeGoosList')
		},
		// 计算小数点
		decimal(num){
			if(num * 10 % 10 === 0){
				// 说明是整数
				num = num + '.00'
			}else if(Math.ceil(num * 100) % 10 === 0){
				// 说明有一位小数
				num = num + '0'
			}else{
				// 说明有两位小数
				num = num + ''
			}
			return num
		},
		
	},
	computed: {
		...mapState('home',['navList','bannerInfo','menuList','appreciine','bigTrademark','mapList']),
		...mapGetters('home',['goodsInfo','tdGoods','goodsListL','goodsListR']),
		// 计算品牌价格
		tdPrice(){
			
			return this.tdGoods.reduce((prev,item) => {
				let string = this.decimal(item.priceMap.salePrice)
				prev.push(string)
				return prev
		},[])
		},
		tdDelete(){
			return this.tdGoods.reduce((prev,item) => {
				let string = this.decimal(item.priceMap.price)
				prev.push(string)
				return prev
			},[])
		},
		// 计算左列表产品价格
		LPrice(){
			return this.goodsListL.reduce((prev,item) => {
			
				let string = this.decimal(item.salePrice)
				prev.push(string)
				return prev
			},[])
		},
		// 计算左列表灰色的价格
		LDelPrice(){
			return this.goodsListL.reduce((prev,item) => {
				let string = this.decimal(item.price)
				prev.push(string)
				return prev
			},[])
		},
		// 计算右列表产品价格
		RPrice(){
			return this.goodsListR.reduce((prev,item) => {
				let string = this.decimal(item.salePrice)
				prev.push(string)
				return prev
			},[])
		},
		// 计算右侧列表灰色价格
		RDelPrice(){
			return this.goodsListR.reduce((prev,item) => {
				let string = this.decimal(item.price)
				prev.push(string)
				return prev
			},[])
		}
	}
	
	
}	
</script>

<style lang="stylus">
.indexContainer
	height: 100%
	.price
		height: 34upx
		font-weight: bold
		color: red
		.one
			font-size: 26upx
			background: red
			color: white
			border-radius: 4upx
			font-weight: normal
		.two
			font-size: 24upx
			margin: 0 10upx
		.three
			font-size: 34upx
		.four
			font-size: 24upx
	.top
		height: 170upx
		width 100%
		position: fixed
		top 0
		left: 0
		
		.nav
			height: 80upx
			background-color: #010932
			color: white
			padding: 0 20upx
			display: flex
			.navScroll
				display: flex
				width 90%
				height: 80upx
				.navItem
					padding: 0 10upx
					height: 80upx
					flex-shrink: 0
					display: flex
					flex-direction: column
					justify-content: space-around
					align-items: center
					&.active
						font-size: 40upx
						font-weight: bold
					.border
						width:40upx
						height: 6upx
						background-color: white
						border-radius: 10upx
			.iconfont
				font-weight: bold
				padding: 0 20upx
				color: white
				line-height: 80upx
	.footer
		height: calc(100vh - 170upx)
		position: absolute
		left: 0
		top: 170upx
	.cancelText
			font-size: 24upx
			margin-top: 10upx
			text-decoration: line-through
			color: #aaa
		.banner
			height: 280upx
			background: #010932
			background-image: url('//dist.vipmro.com/smb/m-static/static/img/index-slider-bg.5fe4c09.png')
			background-repeat: no-repeat
			background-position: bottom
			padding:0 20upx
			.bannerItem
				.bannerImg
					height: 280upx
					border-radius: 20upx
					width: 100%
		.miniImg
			width: 100%
			height: 70upx
		.menu
			height: 196upx
			display: flex
			padding-top 30upx
			.menuItem
				display: flex
				flex-direction: column
				align-items: center
				height: 160upx
				width: 20%
				justify-content: space-around
				.menuImg
					height: 88upx
					width: 88upx
				.menuText
					font-size: 24upx
		.appreciine
			height: 300upx
			padding: 0 20upx 10upx 20upx
			display: flex
			background: linear-gradient(to top,#f2f2f2,white)
			.Lbox
				height: 282upx
				width: 340upx
				border-radius: 20upx
				background-color: #ddeafd
				padding: 10upx
				box-sizing: border-box
				margin-right: 10upx
				.LbigImg
					height: 32upx
					width: 202upx
					margin-bottom: 10upx
				.Lmiddle
					height: 140upx
					display: flex
					.middleImg
						height: 140upx
						width: 140upx
						flex-shrink: 0
						margin-right: 10upx
					.middleContent
						display: flex
						flex-direction: column
						.about
							height: 72upx
							font-size: 30upx
							line-height: 36upx
							display: -webkit-box
							overflow: hidden
							-webkit-line-clamp: 2
							-webkit-box-orient: vertical
							margin-bottom: 10upx
						.btn
							height: 44upx
							width: 150upx
							border-radius: 10upx
							background: linear-gradient(to right,#f77d27,#fac857)
							color: white
							font-size: 24upx
							line-height: 44upx
							text-align: center
				.sale
					height: 50upx
					margin-top 10upx
					display: flex
					.saleImg
						height: 50upx
						width: 130upx
					.saleContent
						height: 50upx
						width: 190upx
						line-height: 50upx
						background-color: #f72748
						border-radius: 0 10upx 10upx 0
						font-family: '楷体'
						font-weight: bold
						color: white
						.one
							font-size: 24upx
						.two
							font-size: 36upx
						.three
							font-size: 28upx
						.four
							margin-left: 10upx
							font-size: 28upx
							font-weight: normal
							color: #fdd7d5
							text-decoration: line-through
			.Rbox
				height: 294upx
				width: 360upx
				.RboxTop
					width: 100%
					display: flex
					justify-content: space-between
					margin-bottom: 10upx
					.topImg1,.topImg2
						width: 174upx
						height: 166upx
				.RboxImg
					width: 360upx
					height: 108upx
		.bigTrademark
			height: 500upx
			.tdTop
				height: 100upx
				padding-left: 20upx
				display: flex
				align-items: center
				.tdIcon
					width: 40upx
					height: 40upx
				.tdTitle
					font-size: 38upx
					font-weight: bold
				.tdText
					margin-left: 20upx
					font-size: 26upx
					color: #999
			.tdScroll
				display: flex
				height: 358upx
				.scrollItem
					width: 210upx
					height: 358upx
					display: flex
					flex-direction: column
					padding-left: 20upx
					.scrollImg
						width: 210upx
						height: 210upx
					.scrollContent
						height: 64upx
						margin: 10upx 0
						font-size: 26upx
						line-height: 32upx
						display: -webkit-box
						overflow: hidden
						-webkit-line-clamp: 2
						-webkit-box-orient: vertical
					
		.selectGoods
			padding-top: 20upx
			background-color: #f2f2f2
			.header
				height: 100upx
				display: flex
				align-items: center
				padding: 0 20upx
				background-color: white
				.headerImg
					height: 40upx
					width 40upx
					margin-right: 20upx
				.headerText
					font-size: 36upx
					font-weight: bold
			.map
				height: 112upx
				display: flex
				background-color: white
				.mapItem
					display: flex
					flex-direction: column
					align-items: center
					width: 25%
					height: 112upx
					flex-shrink: 0
					font-size: 24upx
					.name
						background-color: #999
						width 140upx
						border-radius: 30upx
						height: 40upx
						text-align: center
						line-height: 40upx
						color: white
						margin-bottom: 10upx
						&.active
							background-color: red
							color: white
					.tools
						color: #aaa
						&.active
							color red
			.mapImg
				height: 200upx
				width: 100%
			.goodsList
				display: flex
				justify-content: space-between
				padding: 20upx
				.goodsItemL,.goodsItemR
					display: flex
					flex-direction: column
					width: 343upx
					.rItem:first-child
						.content
							height: 120upx
					.lItem,.rItem
						background-color: white
						width: 343upx
						border-radius: 20upx	
						margin-bottom: 20upx
						.lImg,.rImg
							border-radius: 20upx 20upx 0
							height: 343upx
							width: 343upx
						.content
							height: 152upx
							width: 100%
							padding: 20upx
							box-sizing: border-box
							font-size: 26upx
							.delete
								font-size: 24upx
								color: #aaa
								font-weight: normal
								text-decoration: line-through
								margin-left: 10upx
							
</style>
